.playContainer {
  @apply bg-black w-full;
  font-family: Alibaba PuHuiTi 2;
  margin-top: 5rem !important;
  padding: 3.625rem 0;
  height: 52.083333vw;
  max-height: calc(100vh - 5rem);

  .playBox {
    @apply w-full h-full flex;

    .play {
      @apply h-full flex-1 flex-col bg-bg relative;
    }

    .sectionBox {
      @apply h-full bg-bg pt-10 pl-5 pb-5 flex flex-col;
      width: 20.625rem;

      .titleName {
        @apply font-semibold text-white leading-5 text-xl;
      }

      .jujiBox {
        @apply w-full flex-1 mt-5 overflow-y-auto pr-5;

        &::-webkit-scrollbar {
          width: 0.25rem;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.2);
        }

        .jujiItem {
          @apply flex items-center cursor-pointer shrink-0 rounded px-2 mb-2;
          border: 1px solid #999;
          height: 3.125rem;

          &:hover {
            background-color: #3e3e3e;
          }

          &.jujiItemActive {
            background-color: #3e3e3e;

            & > span {
              @apply text-theme;
            }

            .img {
              @apply bg-transparent;
            }

            .itemLiveIcon {
              @apply mx-4 block;
            }
          }

          .img {
            @apply object-contain;
            width: 5.5rem;
            height: 3.125rem;
          }

          .itemLiveIcon {
            @apply mx-4 hidden;
          }

          & > span {
            @apply text-base leading-4 text-white flex-1;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .playContainer {
    margin-top: 5.875rem !important;
    padding: 0;
  }

  .sectionBoxPhone {
    @apply py-5 px-4;

    .titleName {
      @apply font-semibold text-white leading-6 text-2xl;
    }

    .jujiBox {
      @apply w-full mt-6 overflow-x-auto flex flex-nowrap;

      .jujiItem {
        @apply shrink-0 flex items-center shrink-0 rounded px-4 mb-2 mr-2;
        border: 1px solid #999;
        height: 4.375rem;
        width: 7.5rem;

        &:hover {
          background-color: #3e3e3e;
        }

        &.jujiItemActive {
          background-color: #3e3e3e;

          & > span {
            @apply text-theme;
          }

          .img {
            @apply bg-transparent;
          }

          .itemLiveIcon {
            @apply mx-4 block;
          }
        }

        .img {
          @apply object-contain;
          width: 5.5rem;
          height: 3.125rem;
        }

        .itemLiveIcon {
          @apply mx-4 hidden;
        }

        & > span {
          @apply text-base leading-4 text-white flex-1;
        }
      }
    }
  }
}
